import React, { Component } from 'react';
import { Chart, Axis, Geom, Tooltip, Coord, Legend, Label } from 'bizcharts';
import { DataView } from '@antv/data-set';
import IceContainer from '@icedesign/container';
import axios from 'axios';
import cookie from 'react-cookies';

export default class ChartPie extends Component {
  static displayName = 'ChartPie';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      bianhao: [],
      shuliang: [],
      data: [],
      dataqiye: [],
    };
  }
  getdatagaoxiao =() => {
    const sessionid = cookie.load('sessionId');
    const dateurl = 'http://39.105.21.199:8989/IPEvaluation/evaluateManage/countEvaluateNumByIndexA.do';
    const params = new URLSearchParams();
    params.append('sessionId', sessionid);
    params.append('iwType', '高校单位指标');
    axios.post(dateurl, params).then((response) => {
      const msg = response.data.msg;
      if (msg === 'LoginInvalidate') {
        this.props.history.push('/pagelogin');
      }
      const message = response.data.data;
      const datearray = message.split(',');
      const Data = [];
      for (let i = 0; i < datearray.length; i++) {
        const array = datearray[i].split('=');
        this.state.bianhao.push(array[0]);
        this.state.shuliang.push(array[1]);
        const num = parseInt(array[1]);
        Data.push({
          item: array[0] + '指标',
          count: num,
        });
      }
      this.setState({ data: Data });
    }).catch((error) => {
      console.log('pei', error);
    });
  }
  getdataqiye =() => {
    const sessionid = cookie.load('sessionId');
    const dateurl = 'http://39.105.21.199:8989/IPEvaluation/evaluateManage/countEvaluateNumByIndexA.do';
    const params = new URLSearchParams();
    params.append('sessionId', sessionid);
    params.append('iwType', '企业单位指标');
    axios.post(dateurl, params).then((response) => {
      console.log('pei', response.data);
      const msg = response.data.msg;
      if (msg === 'LoginInvalidate') {
        this.props.history.push('/pagelogin');
      }
      const message = response.data.data;
      const datearray = message.split(',');
      const Data = [];
      for (let i = 0; i < datearray.length; i++) {
        const array = datearray[i].split('=');
        this.state.bianhao.push(array[0]);
        this.state.shuliang.push(array[1]);
        const num = parseInt(array[1]);
        Data.push({
          item: array[0] + '指标',
          count: num,
        });
      }
      this.setState({ dataqiye: Data });
    }).catch((error) => {
      console.log('pei', error);
    });
  }
  componentWillMount() {
    this.getdatagaoxiao();
    this.getdataqiye();
  }
  // getdata =() => {
  //   const data = [];
  //   for (let i = 0; i < this.state.bianhao.length; i++) {
  //     const data1 = this.state.bianhao[i];
  //     const data2 = this.state.shuliang[i];
  //     data.push({
  //       item: '指标',
  //       count: data2,
  //     });
  //     console.log('123123', data2);
  //   }
  //   console.log('123123123', data);
  //   return data;
  // }

  render() {
    // 参考：https://alibaba.github.io/BizCharts/
    // const data = [
    //   { item: 'A1指标', count: 12 },
    //   { item: 'A2指标', count: 14 },
    //   { item: 'A3指标', count: 16 },
    //   { item: 'A4指标', count: 18 },
    // //   // { item: '事例四', count: 13 },
    // //   // { item: '事例五', count: 9 },
    // ];
    // console.log('原始数据', data);
    const dv = new DataView();
    const dv1 = new DataView();
    console.log('ceshishuju', this.state.dataqiye);
    dv.source(this.state.data).transform({
      type: 'percent',
      field: 'count',
      dimension: 'item',
      as: 'percent',
    });
    dv1.source(this.state.dataqiye).transform({
      type: 'percent',
      field: 'count',
      dimension: 'item',
      as: 'percent',
    });

    const cols = {
      percent: {
        formatter: (val) => {
          val = `${val * 100}%`;
          return val;
        },
      },
    };

    return (
      <div className="chart-pie">
        <IceContainer>
          <h4 style={styles.title}>高校一级指标所使用的比例</h4>
          <Chart
            height={400}
            data={dv}
            scale={cols}
            padding={[80, 100, 80, 80]}
            forceFit
          >
            <Coord type="theta" radius={0.75} />
            <Axis name="percent" />
            <Legend position="right" offsetY={-100} offsetX={-100} />
            <Tooltip
              showTitle={false}
              itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}: {value}</li>"
            />
            <Geom
              type="intervalStack"
              position="percent"
              color="item"
              tooltip={[
                'item*percent',
                (item, percent) => {
                  percent = `${percent * 100}%`;
                  return {
                    name: item,
                    value: percent,
                  };
                },
              ]}
              style={{ lineWidth: 1, stroke: '#fff' }}
            >
              <Label
                content="percent"
                formatter={(val, item) => {
                  return `${item.point.item}: ${val}`;
                }}
              />
            </Geom>
          </Chart>
        </IceContainer>
        <IceContainer>
          <h4 style={styles.title}>企业一级指标所使用的比例</h4>
          <Chart
            height={400}
            data={dv1}
            scale={cols}
            padding={[80, 100, 80, 80]}
            forceFit
          >
            <Coord type="theta" radius={0.75} />
            <Axis name="percent" />
            <Legend position="right" offsetY={-100} offsetX={-100} />
            <Tooltip
              showTitle={false}
              itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}: {value}</li>"
            />
            <Geom
              type="intervalStack"
              position="percent"
              color="item"
              tooltip={[
                'item*percent',
                (item, percent) => {
                  percent = `${percent * 100}%`;
                  return {
                    name: item,
                    value: percent,
                  };
                },
              ]}
              style={{ lineWidth: 1, stroke: '#fff' }}
            >
              <Label
                content="percent"
                formatter={(val, item) => {
                  return `${item.point.item}: ${val}`;
                }}
              />
            </Geom>
          </Chart>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  title: {
    margin: '0 0 40px',
    fontSize: '18px',
    paddingBottom: '15px',
    fontWeight: 'bold',
    borderBottom: '1px solid #eee',
  },
};
